<template>
  <div class="home">
    <h3>全局</h3>
    <div style="display: flex; flex-direction: column">
      <span>【state】count:{{ $store.state.count }}</span>
      <span>【getters】count:{{ getSum }}</span>
    </div>
    <div class="module">
      <div class="a">
        <h2>module-a</h2>
      </div>
      <div class="b">
        <h2>module-b</h2>
      </div>
    </div>
    <h3>State</h3>
    <div class="module">
      <div class="a">
        <span>state 获取到的 count: {{ $store.state.a.count }}</span>
        <span>mapState 获取到的 count: {{ counta }}</span>
        <span>computed 获取到的 count：{{ countA }}</span>
      </div>
      <div class="b">
        <span>state 获取到的 count: {{ $store.state.b.count }}</span>
        <span>mapState 获取到的 count: {{ countb }}</span>
        <span>computed 获取到的 count：{{ countB }}</span>
      </div>
    </div>

    <h3>Mutation</h3>
    <div class="module">
      <div class="a">
        <button @click="mutation1A">无载荷，点击 +1</button>
        <button @click="mutation2A">携带载荷，点击 +2</button>
        <button @click="mutation3A">携带载荷(对象风格)，点击 +3</button>
        <button @click="addA">无载荷(基于mapMutations)，点击 +1</button>
      </div>
      <div class="b">
        <button @click="mutation1B">无载荷，点击 +1</button>
        <button @click="mutation2B">携带载荷，点击 +2</button>
        <button @click="mutation3B">携带载荷(对象风格)，点击 +3</button>
        <button @click="addB">无载荷(基于mapMutations)，点击 +1</button>
      </div>
    </div>

    <h3>Action</h3>
    <div class="module">
      <div class="a">
        <button @click="action1A">携带载荷（payload），点击 +10</button>
        <button @click="action2A">携带载荷（object），点击 +10</button>
        <button @click="action3A">异步，点击 -1</button>
        <button @click="action4A">异步(嵌套)，点击 -2</button>
        <button @click="addAsyncA(asyncPayload)">
          携带载荷（mapActions），点击 +10
        </button>
      </div>
      <div class="b">
        <button @click="action1B">携带载荷（payload），点击 +10</button>
        <button @click="action2B">携带载荷（object），点击 +10</button>
        <button @click="action3B">异步，点击 -1</button>
        <button @click="action4B">异步(嵌套)，点击 -2</button>
        <button @click="addAsyncB(asyncPayload)">
          携带载荷（mapActions），点击 +10
        </button>
      </div>
    </div>

    <h3>Getters</h3>
    <div class="module">
      <div class="a">
        <span
          >getters 获取到的 todo 数据：{{ $store.getters["a/doneTodos"] }}</span
        >
        <span
          ><a>使用 mapGetters 获取到的todoId 为 {{ todoId }} 的记录：</a
          >{{ getATodoById(todoId) }}</span
        >
      </div>
      <div class="b">
        <span
          >getters 获取到的 todo 数据：{{ $store.getters["b/doneTodos"] }}</span
        >
        <span
          ><a>使用 mapGetters 获取到的todoId 为 {{ todoId }} 的记录：</a
          >{{ getBTodoById(todoId) }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
// vuex 在 vue2 中的使用：https://juejin.cn/post/7162729768264138760
import { mapState } from "vuex";
import { mapGetters } from "vuex";
import { mapMutations } from "vuex";
import { mapActions } from "vuex";

export default {
  name: "Vuex",
  data() {
    return {
      todoId: 1,
      asyncPayload: {
        amount: 10,
      },
    };
  },
  computed: {
    countA() {
      return this.$store.state.a.count;
    },
    countB() {
      return this.$store.state.b.count;
    },
    ...mapState("a", {
      counta: (state) => state.count,
    }),
    ...mapState("b", {
      countb: (state) => state.count,
    }),

    ...mapGetters(["getSum"]),
    ...mapGetters("a", {
      getATodoById: "getTodoById",
    }),
    ...mapGetters("b", {
      getBTodoById: "getTodoById",
    }),
  },
  methods: {
    ...mapMutations({
      addA: "a/increment",
      addB: "b/increment",
    }),

    mutation1A() {
      this.$store.commit("a/increment");
    },
    mutation2A() {
      let payload = {
        amount: 2,
      };
      this.$store.commit("a/incrementWithPayload", payload);
    },
    mutation3A() {
      this.$store.commit({
        type: "a/incrementWithPayload",
        amount: 3,
      });
    },
    mutation1B() {
      this.$store.commit("b/increment");
    },
    mutation2B() {
      let payload = {
        amount: 2,
      };
      this.$store.commit("b/incrementWithPayload", payload);
    },
    mutation3B() {
      this.$store.commit({
        type: "b/incrementWithPayload",
        amount: 3,
      });
    },

    ...mapActions({
      addAsyncA: "a/incrementAsync",
      addAsyncB: "b/incrementAsync",
    }),
    action1A() {
      this.$store.dispatch("a/incrementAsync", {
        amount: 10,
      });
    },
    action2A() {
      this.$store.dispatch({
        type: "a/incrementAsync",
        amount: 10,
      });
    },
    action3A() {
      this.$store.dispatch("a/actionA").then(() => {
        console.log("after a/actionA...");
      });
    },
    action4A() {
      this.$store.dispatch("a/actionB").then(() => {
        console.log("after a/actionA...");
      });
    },
    action1B() {
      this.$store.dispatch("b/incrementAsync", {
        amount: 10,
      });
    },
    action2B() {
      this.$store.dispatch({
        type: "b/incrementAsync",
        amount: 10,
      });
    },
    action3B() {
      this.$store.dispatch("b/actionA").then(() => {
        console.log("after b/actionA...");
      });
    },
    action4B() {
      this.$store.dispatch("b/actionB").then(() => {
        console.log("after b/actionA...");
      });
    },
  },
};
</script>
<style scoped>
.home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
button {
  width: fit-content;
  margin-right: 5px;
}
h3 {
  border-bottom: 1px solid #000;
}
.module {
  display: flex;
}
.module .a {
  display: flex;
  padding: 0 10px;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid #000;
}
.module .b {
  display: flex;
  padding: 0 10px;
  flex-direction: column;
  align-items: center;
}
</style>
